<template>
  <div class="file-stats" id="file-stats">
    <!-- 顶部统计卡片 -->
    <div class="dashboard-cards">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">文件传输总量</h3>
        </div>
        <div class="card-value">{{ df_info_size }}</div>
        <div class="card-subtitle">今日总量(MB)</div>
      </div>

      <div class="card">
        <div class="card-header">
          <h3 class="card-title">最大文件</h3>
        </div>
        <div class="card-value">{{ transfer_stat_max_sizes }}</div>
        <div class="card-subtitle">最大单文件大小</div>
      </div>

      <div class="card">
        <div class="card-header">
          <h3 class="card-title">平均文件大小</h3>
        </div>
        <div class="card-value">{{ transfer_stat_avg_sizes }}</div>
        <div class="card-subtitle">所有文件平均值</div>
      </div>

      <div class="card">
        <div class="card-header">
          <h3 class="card-title">文件数量</h3>
        </div>
        <div class="card-value">{{ pull_file_count }}</div>
        <div class="card-subtitle">今日传输文件数</div>
      </div>

      <div class="card">
        <div class="card-header">
          <h3 class="card-title">存储占用</h3>
        </div>
        <div class="card-value">30M</div>
        <div class="card-subtitle">已使用存储空间</div>
      </div>
    </div>
    <!-- 文件传输量趋势和文件类型分布 -->
    <div class="file-transport-status">
      <!-- 文件传输量趋势 -->
      <div class="chart-container">
        <div class="chart-toolbar">
          <div class="chart-title">文件传输量趋势</div>
          <div class="chart-btns">
            <el-button class="btn active">今日</el-button>
            <el-button class="btn">本周</el-button>
            <el-button class="btn">本月</el-button>
          </div>
        </div>
        <div class="chart-canvas" id="lineChartDom"></div>
      </div>
      <!-- 文件类型分布   -->
      <div class="chart-container" id="pieChartDom"></div>
    </div>
    <!-- 文件传输速度监控图表 -->
    <div class="file-transfer-speed">
      <div class="chart-container">
        <div class="chart-canvas" id="speedChartDom1"></div>
        <div class="chart-footer">
          <div class="chart-footer__item">
            <el-text size="large">最大文件: 3.2 MB</el-text>
            <el-text size="large">文件数: 7484</el-text>
          </div>
          <div class="chart-footer__item">
            <el-text size="large">最小文件: 2.1 KB</el-text>
            <el-text size="large">存储路径: /pi/center_data_store_dir</el-text>
          </div>
          <div class="chart-footer__item">
            <el-text size="large">平均文件大小: 120.6 KB</el-text>
            <el-text size="large">存储占用: 902M</el-text>
          </div>
        </div>
      </div>

      <div class="chart-container">
        <div class="chart-canvas" id="speedChartDom2"></div>
        <div class="chart-footer">
          <div class="chart-footer__item">
            <el-text size="large">最大文件: 3.2 MB</el-text>
            <el-text size="large">文件数: 11</el-text>
          </div>
          <div class="chart-footer__item">
            <el-text size="large">最小文件: 2.2 KB</el-text>
            <el-text size="large">存储路径: /home/ftproot/ftp/pi</el-text>
          </div>
          <div class="chart-footer__item">
            <el-text size="large">平均文件大小: 105.8 KB</el-text>
            <el-text size="large">存储占用: 30M</el-text>
          </div>
        </div>
      </div>
    </div>
    <!-- 文件传输详情 -->
    <div class="table-container">
      <div class="bar">
        <div class="title">
          <h3>文件传输详情</h3>
        </div>
        <div class="options">
          <el-input class="input" v-model="searchInput" placeholder="搜索文件..."></el-input>
          <el-button class="btn" style="background: #456a9e; color: white; border: none" type="primary">搜索</el-button>
          <el-select v-model="fileType" placeholder="" style="width: 180px">
            <el-option label="全部文件" value="1" />
            <el-option label="图片文件" value="2" />
            <el-option label="文本文件" value="3" />
            <el-option label="视频文件" value="4" />
            <el-option label="其他文件" value="4" />
          </el-select>

          <el-button class="btn" style="background: #22c55e; color: white; border: none" type="primary">导出数据</el-button>
        </div>
      </div>
      <TableWithPageNoCard :table-data="tableData" :border="false" stripe :has-page="true">
        <!-- <el-table-column label="序号" prop="id" width="100"></el-table-column> -->
        <el-table-column label="耗时(s)" prop="duration"></el-table-column>
        <el-table-column label="文件名称" prop="file_name"></el-table-column>
        <el-table-column label="开始时间" prop="start_time">
          <template #default="scope">
            {{ dayjs(scope.row.start_time).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column label="结束时间" prop="end_time">
          <template #default="scope">
            {{ dayjs(scope.row.end_time).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column label="文件大小(kb)" prop="file_size"></el-table-column>
        <el-table-column label="传输速率(kb/s)" prop="speed"></el-table-column>
        <!-- <el-table-column label="传输时间" prop="trans_time"> </el-table-column>
        <el-table-column label="文件路径" prop="file_path"> </el-table-column>
        <el-table-column label="状态" prop="trans_status"><template #default="scope">
            <el-tag :type="scope.row.trans_status === '完成' ? 'success' : scope.row.trans_status === '未完成' ? 'warning' : 'info'
              " size="small" round>
              {{ scope.row.trans_status }}
            </el-tag>
          </template>
        </el-table-column> -->
      </TableWithPageNoCard>
    </div>
  </div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import TableWithPageNoCard from '@/components/table/TableWithPageNoCard.vue'
import { getFileTransfer } from '@/api/file'
import dayjs from 'dayjs'
type EChartsOption = echarts.EChartsOption
const initLineChart = () => {
  var chartDom = document.getElementById('lineChartDom')!
  var myChart = echarts.init(chartDom)
  var option: EChartsOption

  option = {
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['传输量（MB）'],
      textStyle: {
        color: '#eee',
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [
        '00:00',
        '01:00',
        '02:00',
        '03:00',
        '04:00',
        '05:00',
        '06:00',
        '07:00',
        '08:00',
        '09:00',
        '10:00',
        '11:00',
        '12:00',
        '13:00',
        '14:00',
        '15:00',
        '16:00',
        '17:00',
        '18:00',
        '19:00',
        '20:00',
        '21:00',
        '22:00',
        '23:00',
      ],
      axisLabel: {
        color: '#ccc',
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#aaa',
          width: 1,
          type: 'dashed',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#ccc',
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#aaa',
          width: 1,
          type: 'solid',
        },
      },
    },
    series: [
      {
        name: '传输量（MB）',
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 4,
        },
        itemStyle: {
          color: '#456a9e',
        },
        symbolSize: 10,
        areaStyle: {
          color: 'rgba(69, 106, 158, 0.1)',
        },
        label: {
          color: '#fff',
        },
        data: [
          180, 220, 250, 320, 280, 420, 380, 12.5, 15.8, 10.2, 25.4, 30.2, 57.5, 45.8, 38.6, 42.1, 35.7, 28.9, 22.3,
          18.5, 15.2, 12.8, 10.5, 8.3,
        ],
      },
    ],
  }
  option && myChart.setOption(option)
}
const initPieChart = () => {
  var chartDom = document.getElementById('pieChartDom')!
  var myChart = echarts.init(chartDom)
  var option: EChartsOption

  option = {
    title: {
      text: '文件类型分布',
      textStyle: {
        color: '#fff',
      },
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'right',
      textStyle: {
        color: '#eee',
      },
    },
    series: [
      {
        name: '任务状态',
        type: 'pie',
        radius: ['30%', '55%'],
        center: ['40%', '50%'],
        data: [
          { value: 335, name: '图片' },
          { value: 310, name: '文档' },
          { value: 234, name: '视频' },
          { value: 135, name: '音频' },
          { value: 500, name: '压缩包' },
          { value: 1548, name: '其他' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }
  option && myChart.setOption(option)
}
const initSpeedChart1 = () => {
  var chartDom = document.getElementById('speedChartDom1')!
  var myChart = echarts.init(chartDom)
  var option: EChartsOption

  option = {
    title: {
      text: '文件传输速度 (服务器1)',
      textStyle: {
        color: '#fff',
      },
      subtext: '最大速度: 6266.96 KB/S 平均速度: 417.14 KB/S',
      subtextStyle: {
        color: '#ececec',
      },
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['传输速度 (KB/s)'],
      textStyle: {
        color: '#eee',
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['13:53:29', '13:57:40', '14:00:07', '14:02:31', '14:04:34', '14:06:33', '14:09:01', '14:11:23'],
      axisLabel: {
        color: '#ccc',
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#aaa',
          width: 1,
          type: 'dashed',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#ccc',
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#aaa',
          width: 1,
          type: 'solid',
        },
      },
    },
    series: [
      {
        name: '传输速度 (KB/s)',
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 4,
        },
        itemStyle: {
          color: '#22c55e',
        },
        symbolSize: 10,
        areaStyle: {
          color: 'rgba(34, 197, 94, 0.1)',
        },
        label: {
          color: '#fff',
        },
        data: [120, 180, 220, 150, 280, 200, 320, 150],
      },
    ],
  }
  option && myChart.setOption(option)
}
const initSpeedChart2 = () => {
  var chartDom = document.getElementById('speedChartDom2')!
  var myChart = echarts.init(chartDom)
  var option: EChartsOption

  option = {
    title: {
      text: '文件传输速度 (服务器2)',
      textStyle: {
        color: '#fff',
      },
      subtext: '最大速度: 1037.84 KB/S 平均速度: 57.5 KB/S',
      subtextStyle: {
        color: '#eee',
      },
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['传输速度 (KB/s)'],
      textStyle: {
        color: '#eee',
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['14:04:56', '14:05:27', '14:05:37', '14:07:37', '14:08:18', '14:08:38', '14:09:17', '14:10:17'],
      axisLabel: {
        color: '#ccc',
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#aaa',
          width: 1,
          type: 'dashed',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#ccc',
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#aaa',
          width: 1,
          type: 'solid',
        },
      },
    },
    series: [
      {
        name: '传输速度 (KB/s)',
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 4,
        },
        itemStyle: {
          color: '#f59e0b',
        },
        symbolSize: 10,
        areaStyle: {
          color: 'rgba(245, 158, 11, 0.1)',
        },
        label: {
          color: '#fff',
        },
        data: [1500, 2200, 6000, 1800, 2500, 3000, 4200, 2000],
      },
    ],
  }
  option && myChart.setOption(option)
}
const tableData = ref<{
  duration: number
  end_time: number
  file_name: string
  file_size: number
  speed: number
  start_time: number
}[]>([])
// 文件传输总量
const df_info_size = ref('')
// 今日传输文件
const pull_file_count = ref()
// 平均文件大小
const transfer_stat_avg_sizes = ref('')
// 最大文件
const transfer_stat_max_sizes = ref('')
// 获取文件传输统计
const getFileTransferList = async () => {
  const res = await getFileTransfer()
  if (res.code === 0) {
    tableData.value = res.data.transfer_info_list
    df_info_size.value = res.data.df_info_size
    pull_file_count.value = res.data.pull_file_count
    transfer_stat_avg_sizes.value = res.data.transfer_stat_basic.transfer_stat_avg_sizes
    transfer_stat_max_sizes.value = res.data.transfer_stat_basic.transfer_stat_max_sizes
  }
}
const searchInput = ref('')
const fileType = ref('1')


onMounted(() => {
  nextTick(() => {
    initLineChart()
    initPieChart()
    initSpeedChart1()
    initSpeedChart2()
    getFileTransferList()
  })
})
</script>
<style lang="scss" scoped>
.file-stats {
  .dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;

    .card {
      background: #1f2a37;
      border-radius: 12px;
      padding: 12px;
      border: 1px solid #374151;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
      }

      .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 20px;

        .card-title {
          font-size: 16px;
          color: rgba(255, 255, 255, 0.9);
          font-weight: 500;
        }
      }

      .card-value {
        font-size: 32px;
        font-weight: bold;
        color: #456a9e;
        margin-bottom: 8px;
      }

      .card-subtitle {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.6);
        padding-bottom: 20px;
      }
    }
  }

  .file-transport-status {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 24px;

    .chart-container {
      padding: 12px;
      background: #1f2a37;
      border-radius: 12px;
      padding: 24px;
      border: 1px solid #374151;
      margin-bottom: 24px;

      .chart-canvas {
        min-height: 400px;
      }

      .chart-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .chart-title {
          font-size: 18px;
          font-weight: 600;
          color: white;
        }

        .chart-btns {
          .btn {
            padding: 8px 16px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
          }

          .btn.active {
            background: #456a9e;
            color: white;
          }
        }
      }
    }
  }

  .file-transfer-speed {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;

    .chart-container {
      padding: 12px;
      background: #1f2a37;
      border-radius: 12px;
      padding: 24px;
      border: 1px solid #374151;
      margin-bottom: 24px;

      .chart-canvas {
        min-height: 400px;
      }

      .chart-footer {
        padding: 0 24px;

        .chart-footer__item {
          display: flex;
          justify-content: space-between;
          font-size: 18px;
        }
      }
    }
  }

  .table-container {
    padding: 24px;
    background-color: #1f2a37;
    border: 1px solid #374151;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    .bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .title {
        h3 {
          font-size: 20px;
          color: #ffffff;
          margin: 0;
          padding: 0;
        }
      }

      .options {
        display: flex;
        gap: 8px;

        .input {
          border: 1px solid #374151;
          border-radius: 6px;
          color: white;
          font-size: 14px;
          width: 200px;
        }

        .btn {
          padding: 8px 16px;
          font-size: 14px;
          border-radius: 6px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
